import React, { FC, useEffect, useRef, useState } from 'react';
import { isFunction } from 'lodash';

import { isNullOrUndefined } from '@libs/common';

import { Card } from '../card';
import { IconCloseCommon } from '../svg/IconCloseCommon';
import { PortalModal } from './PortalModal';

if (process.env.BROWSER) {
    require('./fullscreen-modal.scss');
}

const COM_PREKEY = 'FullScreenModal';

interface FullScreenModalProps {
    isShow: boolean;

    title?: string;

    blurDomSelector?: string;

    isEnableBackdropClose?: boolean;

    onClose?: () => void;
    onAfterClose?: () => void;
}

const FullScreenModal: FC<FullScreenModalProps> = (props) => {
    const isFirstRenderRef = useRef<boolean>(true);
    const [isShow, setIsShow] = useState<boolean>(props.isShow ?? false);
    const lastElStateRef = useRef<{
        bodyOverflow?: string;
        bodyPaddingRight?: string;
        blurDomFilter?: string;
    }>({});

    function handleModalShownChange(show: boolean, callOutSide: boolean) {
        setIsShow(show);

        if (!show && callOutSide) {
            handleModalClose();
        }

        if (isNullOrUndefined(document)) {
            return;
        }

        const blurDomSelector = props.blurDomSelector ?? '#app';

        const bodyDom = document.body;
        const blurDom = document.querySelector(blurDomSelector) as HTMLElement;

        if (show) {
            lastElStateRef.current.bodyOverflow = document.body.style.overflow;
            lastElStateRef.current.bodyPaddingRight = document.body.style.paddingRight;
            lastElStateRef.current.blurDomFilter = blurDom.style.filter;

            bodyDom.style.overflow = 'hidden';
            bodyDom.style.paddingRight = '17px';
            blurDom.style.filter = 'blur(4px)';
            // document.body.style.webkitFilter = "blur(4px)";
        } else {
            bodyDom.style.overflow = lastElStateRef.current.bodyOverflow;
            bodyDom.style.paddingRight = lastElStateRef.current.bodyPaddingRight;
            blurDom.style.filter = lastElStateRef.current.blurDomFilter;

            callOutSide && handleAfterModalClose();
        }
    }

    function handleAfterModalClose() {
        if (isFunction(props.onAfterClose)) {
            props.onAfterClose();
        }
    }

    function handleModalClose() {
        if (isFunction(props.onClose)) {
            props.onClose();
        }
    }

    useEffect(() => {
        handleModalShownChange(props.isShow, !isFirstRenderRef.current);
        isFirstRenderRef.current = false;
    }, [props.isShow]);

    return (
        <PortalModal isShow={isShow}>
            <div className="modal is-fl is-blur is-center is-show">
                <div
                    className="backdrop"
                    onClick={() =>
                        props.isEnableBackdropClose && handleModalShownChange(false, true)
                    }
                />
                <Card specClassName="content-wrp">
                    <div className="top-bar">
                        {props.title?.toString()?.trim()?.length > 0 && (
                            <span className="title">{props.title}</span>
                        )}
                        <IconCloseCommon className="close" onClick={handleModalClose} />
                    </div>
                    <div className="content">{props.children}</div>
                </Card>
            </div>
        </PortalModal>
    );
};

FullScreenModal.displayName = 'FullScreenModal';

export { FullScreenModal, FullScreenModalProps };
